<template>
  <div>
    <a-drawer
      :title="title"
      placement="right"
      closable
      :visible="visible"
      width="90%"
      @close="onClose">
      <a-table
        :columns="columns1"
        :data-source="data"
        :loading="loading"
        :rowKey="(row) => row.Id"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          columnWidth: '4%',
          getCheckboxProps: getCheckboxProps,
        }"
        :pagination="false"
        bordered
        size="small"
      >
        <template slot="operation" slot-scope="text, record, index">
          <!-- v-if="record.Nums!=0" -->

          <span v-if="hasPerm('TD_Receiving.printMaterial')">
            <a @click="info(record, 2)" v-if="record.Nums != 0">条码打印</a>
          </span>

          <span v-if="hasPerm('TD_Receiving.printBox')">
            <a-divider type="vertical" v-if="record.packnums != 0" />
            <a @click="info(record, 3)" v-if="record.packnums != 0">包码补打</a>
          </span>
        </template>
        <template slot="DyNums" slot-scope="text, record">
          <!-- {{text}} -->
          <a-input class="Bei" size="small" v-model="record.DyNums" style="height: 30px"></a-input>
        </template>
        <template slot="IsBecode" slot-scope="text, record">
          {{ text ? '是' : '否' }}
        </template>
      </a-table>
      <div style="height: 53px"></div>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onClose">取消</a-button>
        <!-- <a-button :style="{ marginRight: '8px' }" @click="printok(5, true)" type="primary" v-if="!printshow"
          >合并打印</a-button
        >

        <a-button :style="{ marginRight: '8px' }" @click="printok(1, true)" type="primary" v-if="!printshow"
          >包码打印</a-button
        > -->
        <a-button
          :style="{ marginRight: '8px' }"
          @click="printok(1, false)"
          type="primary"
          v-if="!printshow"
        >物品打印</a-button
        >
      </div>

      <!--  -->
    </a-drawer>
    <a-drawer
      title="打印详情"
      placement="right"
      closable
      :visible="infovisible"
      @close="infoClose"
      width="50%">
      <a-table
        :columns="isbox ? infocolumnsbox : infocolumns"
        :data-source="infodata"
        :loading="infoloading"
        :rowKey="(row) => row.Id"
        :pagination="pagination"
        @change="handleTableChange"
        :rowSelection="{ selectedRowKeys: infoRowKeys, onChange: infoSelectChange }"
        bordered
        size="small"
      >
        <template slot="dataIndex" slot-scope="text, record, index">
          <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
        </template>
        <template slot="operation" slot-scope="text, record, index"> </template>
        <template slot="Ids" slot-scope="text, record, index">
          {{ record.QrCode.split(',')[1] }}
        </template>
        <template slot="actions" slot-scope="text, record">
          <a-button type="link" @click="showQrCode(record)">二维码</a-button>
        </template>
      </a-table>
      <div style="height: 53px"></div>

      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="infoClose">取消</a-button>
        <a-button :style="{ marginRight: '8px' }" @click="printok(2)" type="primary" v-if="!isbox">补打</a-button>
        <a-button :style="{ marginRight: '8px' }" @click="printok(3)" type="primary" v-if="isbox">包补打</a-button>
      </div>
    </a-drawer>
    <a-modal
      title="选择打印机"
      :visible="printflag"
      :confirm-loading="confirmLoading"
      width="20%"
      :zIndex="1040"
      @ok="printOK"
      @cancel="cancel"
    >
      <!-- {{ this.printtype }} -->
      <a-form-model ref="form" :model="entity" :rules="rules">
        <a-form-model-item label="包码打印机" prop="PrinterId" v-if="PrintPackage">
          <a-select style="width: 100%" v-model="entity.PrinterId">
            <a-select-option v-for="item in printlist" :key="item.Id" :value="item.Id">
              {{ item.Name }}
            </a-select-option>
          </a-select></a-form-model-item
          >
        <a-form-model-item label="物品打印机" prop="MaterialPrinterId" v-if="PrintMaterial">
          <a-select style="width: 100%" v-model="entity.MaterialPrinterId">
            <a-select-option v-for="item in printlist2" :key="item.Id" :value="item.Id">
              {{ item.Name }}
            </a-select-option>
          </a-select></a-form-model-item
        >
        <a-form-model-item label="大小包装" prop="IsMax" v-if="PrintPackage && (num == 1 || num == 5)">
          <a-radio-group button-style="solid" style="width: 100%" v-model="entity.IsMax">
            <a-radio :value="true"> 大 </a-radio>
            <a-radio :value="false"> 小 </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      title="二维码"
      :visible="showQrCodeVisible"
      destroyOnClose
      :footer="null"
      @cancel="showQrCodeVisible = false"
    >
      <div style="display: flex; justify-content: center">
        <div id="qrcode" ref="qrcode"></div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
const columns1 = [
  {
    title: '物品编码',
    dataIndex: 'MaterialCode',
    width: '18%',
    ellipsis: true,
    scopedSlots: { customRender: 'MaterialCode' }
  },

  {
    title: '物品名称',
    dataIndex: 'MaterialName'
    // width: '33%'
    // scopedSlots: { customRender: 'MaterialName' }
  },
  {
    title: '数量',
    align: 'right',
    dataIndex: 'RecNum',
    // scopedSlots: { customRender: 'DyNums' },
    width: '10%'
  },
  {
    title: '批次',

    dataIndex: 'Batch'
  },
  {
    title: '开始日期',

    dataIndex: 'StartDate',
    customRender: (value) => {
      if (value) return value.substring(0, 10)
    }
  },
  {
    title: '结束日期',

    dataIndex: 'EndDate',
    customRender: (value) => {
      if (value) return value.substring(0, 10)
    }
  },

  {
    title: '扫码类型',
    dataIndex: 'IsQrCode',
    align: 'center',
    customRender: (value) => {
      if (value) {
        return '条形码'
      } else {
        return '二维码'
      }
    },

    width: '120px'
  },
  {
    title: '条码类型',
    dataIndex: 'IsSingle',
    align: 'center',
    customRender: (value) => {
      if (value) {
        return '一物一码'
      } else {
        return '一品一码'
      }
    },

    width: '120px'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: '15%',
    align: 'left',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  props: {
    parentObj: { type: Object, required: true }
  },
  data () {
    return {
      showQrCodeVisible: false,
      rules: {
        PrinterId: [{ required: true, message: '请选择包码打印机', trigger: 'change' }],
        MaterialPrinterId: [{ required: true, message: '请选择物品打印机', trigger: 'change' }],
        IsMax: [{ required: true, message: '请选择大小包装', trigger: 'change' }]
      },
      entity: {
        PrinterId: '',
        MaterialPrinterId: '',
        IsMax: false
      },
      PrintPackage: true,
      PrintMaterial: true,
      printlist2: [],
      isflag: null,
      isbox: false,
      IsPushQueue: false,
      printshow: true,
      PrinterId: '',
      printflag: false,
      confirmLoading: false,
      // info 详情
      selectedRowKeys: [],
      infocolumns: [
        {
          title: '序号',
          align: 'center',
          width: '50px',
          scopedSlots: { customRender: 'dataIndex' }
        },
        // {
        //   title: '物品编号',
        //   dataIndex: 'Id',
        //   ellipsis: true,
        //   scopedSlots: { customRender: 'Ids' }
        // },
        {
          title: '条码',
          dataIndex: 'QrCode'
        },
        {
          title: '物品编号',
          dataIndex: 'MaterialCode'
        },
        {
          title: '物品名称',
          dataIndex: 'MaterialName'
        },
        {
          title: '物品规格',
          dataIndex: 'Spec'
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: '70px',
          align: 'center',
          scopedSlots: { customRender: 'actions' }
        }
      ],
      infocolumnsbox: [
        {
          title: '包编号',
          dataIndex: 'Id',
          ellipsis: true,
          scopedSlots: { customRender: 'Ids' }
        },
        {
          title: '包名称',
          dataIndex: 'BoxName',
          ellipsis: true
        }
      ],
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面啊可以通过下拉框进行选择
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize),
        defaultCurrent: 1
      },
      printdata: [],
      infodata: [],
      infoloading: false,
      infovisible: false,
      infoRowKeys: [],
      visible: false,
      loading: false,
      IsPrint: false,
      title: '',
      Id: '',
      infoId: '',
      columns: [
        {
          title: '物品编码',
          dataIndex: 'MaterialCode',
          width: '18%',
          ellipsis: true,
          scopedSlots: { customRender: 'MaterialCode' }
        },

        {
          title: '物品名称',
          dataIndex: 'MaterialName'
          // width: '33%'
          // scopedSlots: { customRender: 'MaterialName' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '10%',
          align: 'left',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      rowinfo: {},
      columns1,
      printtype: '0',
      data: [],
      num: 0,
      printlist: [
        // { Id: '1478178583527559168',
        //   Name: '惠普A01',
        //   Status: 0,
        //   Type: '1478558656898273280',
        //   TypeName: '打印包' },
        // { Id: '1478178583527559169',
        //   Name: '惠普A03',
        //   Status: 0,
        //   Type: '1478558656898273280',
        //   TypeName: '打印包' }
      ]
    }
  },
  methods: {
    // 展示二维码
    showQrCode (row) {
      console.log(row)
      this.showQrCodeVisible = true
      this.$nextTick(() => {
        const qrcode = new QRCode('qrcode', {
          width: 200,
          height: 200,
          text: row.QrCode
        })
      })
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination = { ...pagination }

      this.getinfolist(this.rowinfo.RecId, this.rowinfo.MaterialId, this.rowinfo.Batch)
    },
    mergePrint () {
      // 合并打印
      console.log({
        recid: this.Id,
        liststr: this.selectedRowKeys,
        PrinterId: this.entity.PrinterId,
        MaterialPrinterId: this.entity.MaterialPrinterId,
        IsPushQueue: this.IsPushQueue,
        IsMax: this.entity.IsMax
      })
      this.$http
        .post('/TD/TD_Receiving/RecDetailPrintList', {
          recid: this.Id,
          liststr: this.selectedRowKeys,
          PrinterId: this.entity.PrinterId,
          IsMax: this.entity.IsMax,
          MaterialPrinterId: this.entity.MaterialPrinterId,
          IsPushQueue: this.IsPushQueue
        })
        .then((res) => {
          this.confirmLoading = false
          this.printflag = false
          if (res.Success) {
            this.loading = false
            this.$message.success('打印成功')
            this.onClose()
          } else {
            this.loading = false
            this.$message.error(res.Msg)
          }
        })
    },
    cancel () {
      // 打印机取消按钮后清空验证
      this.$refs['form'].resetFields()
      this.printflag = false
    },
    async getprintlist () {
      // 打印机列表
      this.printlist = []
      this.entity = {
        PrinterId: '',
        MaterialPrinterId: '',
        IsMax: false
      }
      // this.$http.post('/PB/PB_JobBooking/GetPrinterListData?PrintType=PrintPackage', {}).then((res) => {
      //   this.printlist = res.Data
      // })
      this.$http.post('/PB/PB_Printer/GetPrinterDataList', { Search: [{ Condition: 'TypeCode', Keyword: 'PrintMaterial' }] }).then((res) => {
        this.printlist2 = res.Data
      })
    },
    printOK () {
      // 选择打印按钮完成后验证
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        console.log(this.num)
        console.log(this.isflag)
        if (this.num == 1) {
          // 1为第一次包码打印 物品打印
          if (this.isflag) {
            this.confirmLoading = true
            this.IsPushQueue = true
            this.print()
          } else {
            this.confirmLoading = true
            this.IsPushQueue = false
            this.print()
          }
          // this.$confirm({
          //   title: '是否自动打包?',
          //   okText: '是',
          //   cancelText: '否',
          //   onOk: () => {

          //     console.log(1)
          //   },
          //   onCancel: () => {

          //     console.log(2)
          //   }
          // })
          // this.print()
        } else if (this.num == 2) {
          // 2 物品补打
          this.confirmLoading = true
          this.infoprint()
        } else if (this.num == 3) {
          // 3 包码补打
          this.confirmLoading = true
          this.infoboxprint()
        } else if (this.num == 5) {
          // 第一次合并打印
          this.confirmLoading = true
          this.IsPushQueue = true
          this.mergePrint()
        }
      })
    },
    printok (num, flag) {
      if (num == 1) {
        if (this.selectedRowKeys.length == 0) {
          this.$message.error('请选择后打印')
          return
        }
        if (flag) {
          console.log(this.selectedRowKeys)
          var ar = []
          this.data.forEach((item) => {
            this.selectedRowKeys.forEach((val) => {
              if (val == item.Id) {
                ar.push(item)
              }
            })
          })
          console.log(ar)
          var ar2 = []
          ar.forEach((item) => {
            if (item.IsSingle) {
              ar2.push(item)
            }
          })
          if (ar2.length != 0) {
            this.$message.error('物品中有是单个物品的请核对后进行包码打印')
            return
          }

          this.PrintMaterial = false
          this.PrintPackage = true
          // return
        } else {
          this.PrintMaterial = true
          this.PrintPackage = false
        }
        this.getprintlist()
        this.isflag = flag
      } else if (num == 2) {
        if (this.infoRowKeys.length == 0) {
          this.$message.error('请选择后打印')
          return
        }
        // this.printtype = ' PrintMaterial'
        this.getprintlist()
      } else if (num == 3) {
        if (this.infoRowKeys.length == 0) {
          this.$message.error('请选择后打印')
          return
        }
        // this.printtype = 'PrintPackage '
        this.getprintlist()
      } else if (num == 5) {
        if (this.selectedRowKeys.length == 0) {
          this.$message.error('请选择后打印')
          return
        }

        if (flag) {
          console.log(this.selectedRowKeys)
          var ar = []
          this.data.forEach((item) => {
            this.selectedRowKeys.forEach((val) => {
              if (val == item.Id) {
                ar.push(item)
              }
            })
          })
          console.log(ar)
          var ar2 = []
          ar.forEach((item) => {
            if (item.IsSingle) {
              ar2.push(item)
            }
          })
          if (ar2.length != 0) {
            this.$message.error('物品中有是单个物品的请核对后进行打印')
            return
          }

          this.PrintMaterial = true
          this.PrintPackage = true
          // return
        }
      }
      this.num = num
      this.printflag = true
    },
    getCheckboxProps (row) {
      console.log(row)
      return {
        props: {
          disabled: row.Nums != 0 || row.IsQrCode == true
        }
      }
    },
    infoSelectChange (RowKeys, row) {
      this.infoRowKeys = RowKeys
      console.log(RowKeys)
      console.log(row)
    },
    print () {
      // 物品第一次打印或包打印
      console.log(this.PrinterId)

      // this.loading = true
      console.log({
        recid: this.Id,
        liststr: this.selectedRowKeys,
        PrinterId: this.entity.PrinterId,
        MaterialPrinterId: this.entity.MaterialPrinterId,
        IsPushQueue: this.IsPushQueue,
        IsMax: this.entity.IsMax
      })
      this.$http
        .post('/TD/TD_Receiving/RecDetailPrintListData', {
          recid: this.Id,
          liststr: this.selectedRowKeys,
          PrinterId: this.entity.PrinterId,
          IsMax: this.entity.IsMax,
          MaterialPrinterId: this.entity.MaterialPrinterId,
          IsPushQueue: this.IsPushQueue
        })
        .then((res) => {
          this.confirmLoading = false

          console.log(res)
          this.printflag = false
          if (res.Success) {
            this.loading = false
            this.$message.success('打印成功')
            this.onClose()
          } else {
            this.loading = false
            this.$message.error(res.Msg)
          }
        })
    },
    infoprint () {
      // 物品信息打印
      this.infoloading = true
      this.confirmLoading = true
      this.$http
        .post('/TD/TD_Receiving/PrintRecDetailJobBookingQrCode', {
          ReceId: this.infoId,
          nums: this.infoRowKeys,
          PrinterId: this.entity.MaterialPrinterId
        })
        .then((res) => {
          console.log(res)
          this.confirmLoading = false
          if (res.Success) {
            this.infoloading = false
            this.$message.success('打印成功')
            this.infoClose()
          } else {
            this.infoloading = false
            this.$message.error(res.Msg)
          }
        })
    },
    infoboxprint () {
      // 包信息打印
      this.infoloading = true
      this.confirmLoading = true
      this.$http
        .post('/TD/TD_Receiving/PrintRecPackListData', {
          designdetailId: this.infoId,
          nums: this.infoRowKeys,
          PrinterId: this.entity.PrinterId
        })
        .then((res) => {
          console.log(res)
          this.confirmLoading = false
          if (res.Success) {
            this.infoloading = false
            this.$message.success('打印成功')
            this.infoClose()
          } else {
            this.infoloading = false
            this.$message.error(res.Msg)
          }
        })
    },
    getinfoboxlist (id, MaterialId) {
      // 包信息列表
      this.infoloading = true
      this.$http.post(`/TD/TD_Receiving/GetRecPackListData?recid=${id}&MaterialId=${MaterialId}`, {}).then((res) => {
        console.log(res)
        if (res.Success) {
          this.infoloading = false
          this.infodata = res.Data
        } else {
          this.infoloading = false
          this.$message.error(res.Msg)
        }
      })
    },
    getinfolist (id, MaterialId, Batch) {
      // 物品信息列表
      this.infoloading = true
      this.$http
        .post(`/PB/PB_JobBookingQrCode/GetJobBookingMaterialList`, {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          // SortField: 'UpdateTime',
          // SortType: 'desc',
          Search: [{ Condition: 'RecId', Keyword: id }, { Condition: 'MaterialId', Keyword: MaterialId }]
        })
        .then((res) => {
          console.log(res)
          if (res.Success) {
            this.infoloading = false
            this.infodata = res.Data
            const pagination = { ...this.pagination }
            pagination.total = res.Total
            this.pagination = pagination
          } else {
            this.infoloading = false
            this.$message.error(res.Msg)
          }
        })
    },
    infoClose () {
      // 详情取消
      this.isbox = false
      this.confirmLoading = false
      this.printflag = false
      this.infodata = []
      this.infoRowKeys = []
      this.infoId = ''
      this.infovisible = false
      this.PrinterId = ''
    },
    info (row, num) {
      // 打开详情
      console.log(row)
      if (num == 2) {
        this.PrintMaterial = true
        this.PrintPackage = false
        this.getprintlist()
        this.infoId = row.RecId
        this.rowinfo = row
        this.getinfolist(row.RecId, row.MaterialId, row.Batch)
        this.infovisible = true
      } else if (num == 3) {
        this.PrintMaterial = false
        this.PrintPackage = true
        this.getprintlist()
        this.isbox = true
        this.infoId = row.RecId
        this.infovisible = true
        this.getinfoboxlist(row.RecId, row.MaterialId)
      }
    },
    rowKey (row) {
      console.log(row)
    },
    onSelectChange (RowKeys, row) {
      this.selectedRowKeys = RowKeys
    },
    onClose () {
      this.isflag = null
      this.confirmLoading = false
      this.printflag = false
      this.data = []
      this.selectedRowKeys = []
      this.title = ''
      this.Id = ''
      this.visible = false
      this.PrinterId = ''
    },
    open (id, title) {
      this.Id = id
      this.title = title
      this.visible = true
      this.num = 0
      this.getdatalist(id)
      this.getprintlist()
    },
    getdatalist (id) {
      this.loading = true
      this.$http.post('/TD/TD_Receiving/GetRecDetailPrintList?ReceId=' + id, {}).then((res) => {
        console.log(res)
        if (res.Success) {
          this.loading = false
          // res.Data.DesignDetailPrint.forEach(item => {
          //   if (item.IsNumber) {
          //     item.DyNums = item.RealNums
          //   } else {
          //     item.DyNums = 1
          //   }
          // })
          this.data = res.Data
          this.printshow = this.data.every((item) => {
            return item.Nums != 0
          })
          // this.IsPrint = res.Data.IsPrint
          console.log(this.data)
        } else {
          this.loading = false
          this.$message.error(res.Msg)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.Bei {
  border: none;
  text-align: right;
}
</style>
